<template>
  <div>
    <div v-loading="loading" class="mainData">
      <div class="header">
        <div class="header-row">
          <div class="header-item header-item1">
            <div class="background-item1" />
            <div class="background-item2" />
            <div class="header-row-left">
              <div class="header-row-left-icon" style="background:#B3D5FE;">
                <img src="@/assets/index/daiban.png" />
              </div>
              <div class="header-row-left-text">
                <div class="header-row-left-text-title">农村复垦待办任务</div>
                <div class="header-row-left-text-remark">已申请，等待处理的项目</div>
              </div>
            </div>
            <div class="header-row-right">
              <div
                v-if="dashboardData"
                class="header-row-right-number"
              >{{ dashboardData.waitCount }}</div>
            </div>
          </div>
          <div class="header-item header-item2">
            <div class="background-item1" />
            <div class="background-item2" />
            <div class="header-row-left">
              <div class="header-row-left-icon" style="background:#9AE99B;">
                <img src="@/assets/index/yiban.png" />
              </div>
              <div class="header-row-left-text">
                <div class="header-row-left-text-title">农村复垦已办任务</div>
                <div class="header-row-left-text-remark">受理已成功的项目</div>
              </div>
            </div>
            <div class="header-row-right">
              <div
                v-if="dashboardData"
                class="header-row-right-number"
              >{{ dashboardData.dealCount }}</div>
            </div>
          </div>
          <div class="header-item header-item3">
            <div class="background-item1" />
            <div class="background-item2" />
            <div class="header-row-left">
              <div class="header-row-left-icon" style="background:#FDC590;">
                <img src="@/assets/index/kejiaoyi.png" />
              </div>
              <div class="header-row-left-text">
                <div class="header-row-left-text-title">综合整治待办任务</div>
                <div class="header-row-left-text-remark">已申请，等待处理的项目</div>
              </div>
            </div>
            <div class="header-row-right">
              <div
                v-if="dashboardData_three"
                class="header-row-right-number"
              >{{ dashboardData_three.waitCount }}</div>
            </div>
          </div>
          <div class="header-item header-item4">
            <div class="background-item1" />
            <div class="background-item2" />
            <div class="header-row-left">
              <div class="header-row-left-icon" style="background:#9AECF8;">
                <img src="@/assets/index/yijiaoyi.png" />
              </div>
              <div class="header-row-left-text">
                <div class="header-row-left-text-title">综合整治已办任务</div>
                <div class="header-row-left-text-remark">受理已成功的项目</div>
              </div>
            </div>
            <div class="header-row-right">
              <div
                v-if="dashboardData_three"
                class="header-row-right-number"
              >{{ dashboardData_three.dealCount }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="mainContent">
        <el-row type="flex" :gutter="20" justify="space-between">
          <el-col :span="12">
            <div class="daibanBox">
              <div class="daibanBox-tag">
                <div class="daibanBox-tag-left">
                  <div class="daibanBox-tag-left-icon" />
                  <div class="daibanBox-tag-left-text">农村复垦待办任务</div>
                </div>
                <div class="daibanBox-tag-right">
                  <div class="biaoshiItem">
                    <div class="biaoshiBox biaoshiBox1" />
                    <div class="biaoshiBoxText">正常</div>
                  </div>
                  <div class="biaoshiItem">
                    <div class="biaoshiBox biaoshiBox2" />
                    <div class="biaoshiBoxText">预警</div>
                  </div>
                  <div class="biaoshiItem">
                    <div class="biaoshiBox biaoshiBox3" />
                    <div class="biaoshiBoxText">警告</div>
                  </div>
                  <div class="biaoshiItem">
                    <div class="biaoshiBox biaoshiBox4" />
                    <div class="biaoshiBoxText">超期</div>
                  </div>
                </div>
              </div>
              <ul
                v-if="dashboardData.waitWork && dashboardData.waitWork.length != 0"
                class="daibanBox-content"
              >
                <li
                  v-for="(item, index) in dashboardData.waitWork"
                  :key="index"
                  class="daibanBox-content-item"
                  @click="handleYwdeal_tow(item, 1)"
                >
                  <p :title="item.projectName">
                    <el-tag
                      v-if="item.postponeType == 'NORMAL'"
                      type="info"
                      effect="dark"
                      size="mini"
                    >{{ item.postponeDay }}天</el-tag>
                    <el-tag
                      v-else-if="item.postponeType == 'EARLY_WARNING'"
                      style="border: 1px solid #FFD242;"
                      color="#FFD242"
                      effect="dark"
                      size="mini"
                    >{{ item.postponeDay }}天</el-tag>
                    <el-tag
                      v-else-if="item.postponeType == 'WARNING'"
                      type="warning"
                      effect="dark"
                      size="mini"
                    >{{ item.postponeDay }}天</el-tag>
                    <el-tag
                      v-else-if="item.postponeType == 'ULTRA_TIME'"
                      type="danger"
                      effect="dark"
                      size="mini"
                    >{{ item.postponeDay }}天</el-tag>
                    {{ item.projectName }}
                  </p>
                  <p>{{ item.showTime }}</p>
                </li>
              </ul>
              <div v-else-if="!dashboardData.waitWork" class="noData">暂无待办项</div>
              <div v-else-if="dashboardData.waitWork.length == 0" class="noData">暂无待办项</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="daibanBox">
              <div class="daibanBox-tag">
                <div class="daibanBox-tag-left">
                  <div class="daibanBox-tag-left-icon" />
                  <div class="daibanBox-tag-left-text">农村复垦已办任务</div>
                </div>
                <div class="daibanBox-tag-right" />
              </div>
              <ul
                v-if="dashboardData.dealWork && dashboardData.dealWork.length != 0"
                class="daibanBox-content"
              >
                <li
                  v-for="(item, index) in dashboardData.dealWork"
                  :key="index"
                  class="daibanBox-content-item"
                  @click="handleYwdeal_tow(item, 2)"
                >
                  <p :title="item.projectName">{{ item.projectName }}</p>
                  <p>{{ item.showTime }}</p>
                </li>
              </ul>
              <div v-else-if="!dashboardData.dealWork" class="noData">暂无已办项</div>
              <div v-else-if="dashboardData.dealWork.length == 0" class="noData">暂无已办项</div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="mainContent mainContent-bottom">
        <el-row type="flex" :gutter="20" justify="space-between">
          <el-col :span="12">
            <div class="daibanBox">
              <div class="daibanBox-tag">
                <div class="daibanBox-tag-left">
                  <div class="daibanBox-tag-left-icon" />
                  <div class="daibanBox-tag-left-text">综合整治待办任务</div>
                </div>
                <div class="daibanBox-tag-right">
                  <div class="biaoshiItem">
                    <div class="biaoshiBox biaoshiBox1" />
                    <div class="biaoshiBoxText">正常</div>
                  </div>
                  <div class="biaoshiItem">
                    <div class="biaoshiBox biaoshiBox2" />
                    <div class="biaoshiBoxText">预警</div>
                  </div>
                  <div class="biaoshiItem">
                    <div class="biaoshiBox biaoshiBox3" />
                    <div class="biaoshiBoxText">警告</div>
                  </div>
                  <div class="biaoshiItem">
                    <div class="biaoshiBox biaoshiBox4" />
                    <div class="biaoshiBoxText">超期</div>
                  </div>
                </div>
              </div>
              <ul
                v-if="dashboardData_three.waitWork && dashboardData_three.waitWork.length != 0"
                class="daibanBox-content"
              >
                <li
                  v-for="(item, index) in dashboardData_three.waitWork"
                  :key="index"
                  class="daibanBox-content-item"
                  @click="handleYwdeal_three(item,1)"
                >
                  <p :title="item.projectName">
                    <el-tag
                      v-if="item.postponeType == 'NORMAL'"
                      type="info"
                      effect="dark"
                      size="mini"
                    >{{ item.postponeDay }}天</el-tag>
                    <el-tag
                      v-else-if="item.postponeType == 'EARLY_WARNING'"
                      style="border: 1px solid #FFD242;"
                      color="#FFD242"
                      effect="dark"
                      size="mini"
                    >{{ item.postponeDay }}天</el-tag>
                    <el-tag
                      v-else-if="item.postponeType == 'WARNING'"
                      type="warning"
                      effect="dark"
                      size="mini"
                    >{{ item.postponeDay }}天</el-tag>
                    <el-tag
                      v-else-if="item.postponeType == 'ULTRA_TIME'"
                      type="danger"
                      effect="dark"
                      size="mini"
                    >{{ item.postponeDay }}天</el-tag>
                    {{ item.projectName }}
                  </p>
                  <p>{{ item.showTime }}</p>
                </li>
              </ul>
              <div v-else-if="!dashboardData_three.waitWork" class="noData">暂无待办项</div>
              <div v-else-if="dashboardData_three.waitWork.length == 0" class="noData">暂无待办项</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="daibanBox">
              <div class="daibanBox-tag">
                <div class="daibanBox-tag-left">
                  <div class="daibanBox-tag-left-icon" />
                  <div class="daibanBox-tag-left-text">综合整治已办任务</div>
                </div>
                <div class="daibanBox-tag-right" />
              </div>
              <ul
                v-if="dashboardData_three.dealWork && dashboardData_three.dealWork.length != 0"
                class="daibanBox-content"
              >
                <li
                  v-for="(item, index) in dashboardData_three.dealWork"
                  :key="index"
                  class="daibanBox-content-item"
                  @click="handleYwdeal_three(item,2)"
                >
                  <p :title="item.projectName">{{ item.projectName }}</p>
                  <p>{{ item.showTime }}</p>
                </li>
              </ul>
              <div v-else-if="!dashboardData_three.dealWork" class="noData">暂无已办项</div>
              <div v-else-if="dashboardData_three.dealWork.length == 0" class="noData">暂无已办项</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
var echarts = require('echarts')
import { getToken } from '@/utils/auth'
import { getDashboardData, getHomeUpcomingDownNewList } from '@/api/dashboard'
import config, {
  handleTwoPhaseJumpRoute,
  handleThreePhaseJumpRoute
} from '@/config'

export default {
  name: 'Dashboard',
  data() {
    return {
      defaultValue: '个人',
      userInfo: '',
      dashboardData: '',
      dashboardData_three: '',
      baseUrl: config.baseUrl,
      token: '',
      loading: false
    }
  },
  created() {
    this.loading = true
    this.userInfo = this.$store.state.user.userInfo
    this.token = getToken()
    getDashboardData().then(res => {
      this.loading = false
      this.dashboardData = res.data
    })
    getHomeUpcomingDownNewList().then(res => {
      this.dashboardData_three = res.data
    })
  },
  methods: {
    changeType(command) {
      this.defaultValue = command
      if (command == '个人') {
        this.$router.push('/fksqtc/personApplyCheck/list')
      } else {
        this.$router.push('/fksqtc/groupApplyCheck/list')
      }
    },
    //前往项目预组装
    toYuzuzhuang() {
      this.$router.push('/xmkgh/xmprezz/list')
    },

    handleYwdeal_tow(row, num) {
      localStorage.setItem('lookStatus', num)
      localStorage.setItem('router', row.processValue)
      if (this.userInfo.roleList.length > 0) {
        localStorage.setItem('menusName', this.userInfo.roleList[0].code)
      } else {
        this.$alert('暂无权限', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.$router.push('/login')
          }
        })
      }
      localStorage.setItem('userId', this.userInfo.userId)
      localStorage.setItem('projectId', row.projectId)
      localStorage.setItem('projectName', row.name)
      handleTwoPhaseJumpRoute()
    },
    handleYwdeal_three(row,num) {
      localStorage.setItem('lookStatus', num)
      localStorage.setItem('areaType', row.projectLevelName)
      localStorage.setItem('router', row.processValue)
      if (this.userInfo.roleList.length > 0) {
        localStorage.setItem('menusName', this.userInfo.roleList[0].code)
      } else {
        this.$alert('暂无权限', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.$router.push('/login')
          }
        })
      }
      localStorage.setItem('userId', this.userInfo.userId)
      localStorage.setItem('projectId', row.projectId)
      localStorage.setItem('projectName', row.name)
      localStorage.setItem('key', row.processValue)
      handleThreePhaseJumpRoute()
    }
  }
}
</script>

<style lang="scss" scoped>
.mainData {
  padding: 20px;
  min-height: calc(100vh - 114px);
  box-sizing: border-box;
  background-color: #f5f6f7;
}
.header {
  .header-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .header-item1 {
      background: linear-gradient(135deg, #badaff 0%, #3285f1 100%);
    }
    .header-item2 {
      background: linear-gradient(135deg, #8beb8d 0%, #56bb53 100%);
    }
    .header-item3 {
      background: linear-gradient(135deg, #febf7f 0%, #f0863d 100%);
    }
    .header-item4 {
      background: linear-gradient(135deg, #90edfa 0%, #2ec5dd 100%);
    }
    .header-item {
      width: 24%;
      border-radius: 10px;
      height: 104px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .background-item1 {
        position: absolute;
        top: -5px;
        right: -50px;
        width: 100px;
        height: 100px;
        background: rgba(255, 255, 255, 1);
        border-radius: 50%;
        opacity: 0.1;
      }
      .background-item2 {
        position: absolute;
        top: -50px;
        right: 0;
        width: 100px;
        height: 100px;
        background: rgba(255, 255, 255, 1);
        border-radius: 50%;
        opacity: 0.1;
      }
    }
  }
}
.header-row-left {
  margin-left: 30px;
  display: flex;
  align-items: center;

  .header-row-left-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
    flex-shrink: 0;
    img {
      width: 23px;
      height: 24px;
    }
  }
}
.header-row-left-text-title {
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
  color: rgba(255, 255, 255, 1);
  margin-bottom: 5px;
}
.header-row-left-text-remark {
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  color: rgba(242, 242, 242, 1);
}
.header-row-right-number {
  font-size: 56px;
  font-weight: 500;
  line-height: 68px;
  color: rgba(255, 255, 255, 1);
  margin-right: 30px;
}
.daibanBox {
  width: 100%;
  background-color: #fff;
  padding: 20px 30px;
  height: 274px;
}
.daibanBox::-webkit-scrollbar,
.daibanBox::-ms-scrollbar {
  display: none;
}

.tokubetsunaBox {
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}
.mainContent {
  margin: 20px 0;
}
.mainContent-bottom {
  margin-top: 0;
}
.daibanBox-tag {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tokubetsunaBox {
  .daibanBox-tag-left {
    margin-left: 30px;
  }
  .daibanBox-tag-right {
    margin-right: 30px;
  }
}
.daibanBox-tag-left {
  display: flex;
  align-items: center;
  .daibanBox-tag-left-icon {
    width: 4px;
    height: 16px;
    background: linear-gradient(
      135deg,
      rgba(186, 218, 255, 1) 0%,
      rgba(22, 116, 239, 1) 100%
    );
    opacity: 1;
    border-radius: 100px;
  }
  .daibanBox-tag-left-text {
    font-size: 16px;
    font-weight: bold;
    line-height: 22px;
    color: rgba(51, 51, 51, 1);
    margin-left: 6px;
  }
}
.daibanBox-tag-right {
  display: flex;
  align-items: center;
}
.biaoshiItem {
  display: flex;
  align-items: center;
  margin-right: 10px;
  .biaoshiBox {
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
  }
  .biaoshiBox.biaoshiBox1 {
    background-color: #909399;
  }
  .biaoshiBox.biaoshiBox2 {
    background-color: rgb(255, 210, 66);
  }
  .biaoshiBox.biaoshiBox3 {
    background-color: #e6a23c;
  }
  .biaoshiBox.biaoshiBox4 {
    background-color: #f56c6c;
  }
  .biaoshiBoxText {
    font-size: 12px;
    margin-left: 5px;
    line-height: 15px;
  }
}
.biaoshiItem:last-child {
  margin-right: 0;
}
.daibanBox-content {
  padding: 0;
  height: 200px;
  overflow-x: hidden;
  overflow-y: scroll;
  margin-top: 10px;
  margin-bottom: 0;
  .daibanBox-content-item {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    p {
      margin: 0;
      transition: all 0.3s;
      cursor: pointer;
    }
    p:first-child {
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: rgba(51, 51, 51, 1);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    p:last-child {
      font-size: 12px;
      font-weight: 400;
      line-height: 17px;
      color: rgba(153, 153, 153, 1);
      width: 20%;
      flex-shrink: 0;
      text-align: right;
    }
  }
  .daibanBox-content-item:last-child {
    margin-bottom: 0;
  }
  .daibanBox-content-item:hover p {
    color: #3285f1;
  }
}
.daibanBox-content::-webkit-scrollbar {
  display: none;
}
.gotoBox {
  height: 85px;
  background-color: #fff;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .gotoBox-left-box {
    display: flex;
    .gotoBox-left {
      width: 26px;
      height: 26px;
      background: rgba(71, 156, 251, 1);
      border-radius: 50%;
      opacity: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 30px;
      i {
        font-size: 16px;
        color: #fff;
      }
      margin-top: 5px;
    }
    .gotoBox-left1 {
      background: rgba(3, 230, 132, 1);
    }
    .gotoBox-left2 {
      background: rgba(255, 177, 59, 1);
    }
    .gotoBox-right-text {
      margin-left: 8px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      p {
        margin: 0;
      }
      p:first-child {
        font-size: 20px;
        font-weight: 500;
        line-height: 30px;
        color: rgba(51, 51, 51, 1);
      }
      p:last-child {
        font-size: 12px;
        font-weight: 400;
        line-height: 17px;
        color: rgba(153, 153, 153, 1);
        margin-top: 5px;
      }
      .shenqingType {
        font-size: 12px;
        font-weight: 400;
        line-height: 17px;
        color: rgba(153, 153, 153, 1);
        margin-top: 1px;
        cursor: pointer;
      }
    }
  }
}

.gotoBox-right-icon {
  margin-right: 25px;
  font-size: 18px;
  color: #dcdcdc;
}

@media screen and (max-width: 1583px) {
  .gotoBox .gotoBox-left-box .gotoBox-right-text p:first-child {
    font-size: 16px;
  }
  .gotoBox .gotoBox-left-box .gotoBox-right-text p:last-child {
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media screen and (max-width: 1420px) {
  .header-row-right-number {
    font-size: 40px;
    margin-right: 15px;
  }
  .header-row-left {
    margin-left: 15px;
  }
}
@media screen and (max-width: 1420px) {
  .header-row-right-number {
    font-size: 35px;
    margin-right: 10px;
  }
  .header-row-left {
    margin-left: 10px;
  }
}
/deep/ .el-col-14 {
  width: 60.33333%;
}
.noData {
  font-size: 22px;
  text-align: center;
  margin-top: 50px;
  color: #666;
  letter-spacing: 5px;
}

.mainData {
  /deep/ .el-loading-mask {
    z-index: 500;
  }
}
</style>
